<!--
 * @Author: 陈俊升 761723995@qq.com
 * @Date: 2023-10-21 15:13:58
 * @LastEditors: 陈俊升 761723995@qq.com
 * @LastEditTime: 2024-02-04 10:14:38
 * @FilePath: /hr_new_vue3/src/views/Management/Human/ChangeManagement/LeaveManagement/WaitLeave/Components/LeaveHandover/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 工作交接详情 -->
<template>
  <TemplateDesign
    title="工作交接表模板"
    ref="templateRef"
    :back="back"
    @upshowData="upshowData"
    @sortshowData="sortshowData"
    :refForm="refForm"
    @saveForm="save"
  >
    <template #base>
      <a-form
        ref="refForm"
        :model="formData.data?.baseInfo"
        layout="vertical"
        :rules="rules"
      >
        <a-form-item field="name" label="工作交接表模板名称">
          <a-input
            size="large"
            v-model="formData.data.baseInfo.name"
            placeholder="请输入模板名称"
            allow-clear
            style="border-style: solid"
          />
        </a-form-item>
        <a-form-item field="enable" label="启用状态">
          <a-switch
            v-model="formData.data.baseInfo.enable"
            :checked-value="1"
            :unchecked-value="2"
          />
        </a-form-item>
        <!-- <a-form-item field="isShowDefault" label="是否显示">
          <a-switch
            v-model="formData.data.data.isShowDefault"
            :checked-value="1"
            :unchecked-value="2"
          />
        </a-form-item> -->
        <a-form-item field="remark" label="描述">
          <a-textarea
            v-model="formData.data.baseInfo.remark"
            placeholder="请输入"
            show-word-limit
            :max-length="300"
            :auto-size="{
              minRows: 5
            }"
            allow-clear
          />
        </a-form-item>
      </a-form>
    </template>
    <template #template-design>
      <div class="wrap">
        <a-form :model="formData.data">
          <section v-if="formData.data?.wenJian?.length > 0">
            <div class="title-box">
              <div class="title">
                <div
                  :style="{
                    marginLeft: '20px'
                  }"
                >
                  文件移交
                </div>
                <div>
                  <a-popconfirm content="是否删除该项？" @ok="del('wenJian')">
                    <a-tooltip content="删除" position="left">
                      <IconFont
                        class="icon"
                        type="icon-delete"
                        :size="24"
                      ></IconFont>
                    </a-tooltip>
                  </a-popconfirm>
                </div>
              </div>
            </div>
            <a-form-item hide-label no-style>
              <a-table
                :data="formData.data.wenJian"
                :pagination="false"
                :bordered="{ cell: true }"
              >
                <template #columns>
                  <a-table-column
                    title="文件名称"
                    :width="200"
                    dataIndex="name"
                  >
                    <template #title>
                      <span class="star">文件名称</span>
                    </template>
                    <template #cell="{ record }">
                      <a-form-item hide-label>
                        <a-input
                          v-model="record.name"
                          :style="{ borderStyle: 'none' }"
                        />
                      </a-form-item>
                    </template>
                  </a-table-column>
                  <a-table-column
                    title="文件交接说明"
                    :width="200"
                    dataIndex="remark"
                  >
                    <template #title>
                      <span class="star">文件交接说明</span>
                    </template>
                    <template #cell="{ record }">
                      <a-form-item hide-label>
                        <a-input v-model="record.remark" />
                      </a-form-item>
                    </template>
                  </a-table-column>
                  <a-table-column title="数量" :width="200" dataIndex="num">
                    <template #title>
                      <span class="star">数量</span>
                    </template>
                    <template #cell="{ record }">
                      <a-form-item hide-label>
                        <a-input-number
                          hide-button
                          :min="1"
                          v-model="record.num"
                        />
                      </a-form-item>
                    </template>
                  </a-table-column>
                  <a-table-column
                    title="接收人"
                    :width="200"
                    dataIndex="acceptId"
                  >
                    <template #title>
                      <span class="star">接收人</span>
                    </template>
                    <template #cell="{ record }">
                      <a-form-item hide-label>
                        <a-select
                          placeholder="请选择"
                          v-model="record.acceptId"
                          allow-search
                          allow-clear
                          disabled
                        >
                        </a-select>
                      </a-form-item>
                    </template>
                  </a-table-column>
                  <a-table-column
                    title="监督人"
                    :width="200"
                    dataIndex="superviseId"
                  >
                    <template #title>
                      <span class="star">监督人</span>
                    </template>
                    <template #cell="{ record }">
                      <a-form-item hide-label>
                        <a-select
                          placeholder="请选择"
                          v-model="record.superviseId"
                          allow-search
                          allow-clear
                          disabled
                        >
                        </a-select>
                      </a-form-item>
                    </template>
                  </a-table-column>
                  <a-table-column title="操作" :width="80" fixed="right">
                    <template #cell="{ record, rowIndex }">
                      <div class="operation">
                        <a-tooltip content="新增">
                          <IconFont
                            type="icon-add-def"
                            :size="26"
                            :style="{
                              cursor: 'pointer'
                            }"
                            @click="addSub(rowIndex, 'wenJian', 1)"
                          />
                        </a-tooltip>
                        <a-tooltip
                          content="删除"
                          v-if="formData.data.wenJian.length > 1"
                        >
                          <a-popconfirm
                            content="是否确认删除该条数据?"
                            @ok="removeSub(record.id, rowIndex, 'wenJian')"
                          >
                            <IconFont
                              type="icon-delete"
                              :size="26"
                              :style="{
                                cursor: 'pointer'
                              }"
                            />
                          </a-popconfirm>
                        </a-tooltip>
                      </div>
                    </template>
                  </a-table-column>
                </template>
              </a-table>
            </a-form-item>
          </section>

          <section v-if="formData.data?.riChang?.length > 0">
            <div class="title-box">
              <div class="title">
                <div
                  :style="{
                    marginLeft: '20px'
                  }"
                >
                  日常工作移交
                </div>
                <div>
                  <a-popconfirm content="是否删除该项？" @ok="del('riChang')">
                    <a-tooltip content="删除" position="left">
                      <IconFont
                        class="icon"
                        type="icon-delete"
                        :size="24"
                      ></IconFont>
                    </a-tooltip>
                  </a-popconfirm>
                </div>
              </div>
            </div>
            <a-form-item hide-label no-style>
              <a-table
                :data="formData.data.riChang"
                :pagination="false"
                :bordered="{ cell: true }"
              >
                <template #columns>
                  <a-table-column
                    title="工作事项"
                    :width="200"
                    dataIndex="name"
                  >
                    <template #title>
                      <span class="star">工作事项</span>
                    </template>
                    <template #cell="{ record }">
                      <a-form-item hide-label>
                        <a-input v-model="record.name" />
                      </a-form-item>
                    </template>
                  </a-table-column>
                  <a-table-column
                    title="工作事项情况说明"
                    :width="200"
                    dataIndex="remark"
                  >
                    <template #title>
                      <span class="star">工作事项情况说明</span>
                    </template>
                    <template #cell="{ record }">
                      <a-form-item hide-label>
                        <a-input v-model="record.remark" />
                      </a-form-item>
                    </template>
                  </a-table-column>
                  <a-table-column
                    title="接收人"
                    :width="200"
                    dataIndex="acceptId"
                  >
                    <template #title>
                      <span class="star">接收人</span>
                    </template>
                    <template #cell="{ record }">
                      <a-form-item hide-label>
                        <a-select
                          placeholder="请选择"
                          v-model="record.acceptId"
                          allow-search
                          allow-clear
                          disabled
                        >
                        </a-select>
                      </a-form-item>
                    </template>
                  </a-table-column>
                  <a-table-column
                    title="监督人"
                    :width="200"
                    dataIndex="superviseId"
                  >
                    <template #title>
                      <span class="star">监督人</span>
                    </template>
                    <template #cell="{ record }">
                      <a-form-item hide-label>
                        <a-select
                          placeholder="请选择"
                          v-model="record.superviseId"
                          allow-search
                          allow-clear
                          disabled
                        >
                        </a-select>
                      </a-form-item>
                    </template>
                  </a-table-column>
                  <a-table-column title="操作" :width="80" fixed="right">
                    <template #cell="{ record, rowIndex }">
                      <div class="operation">
                        <a-tooltip content="新增">
                          <IconFont
                            type="icon-add-def"
                            :size="26"
                            :style="{
                              cursor: 'pointer'
                            }"
                            @click="addSub(rowIndex, 'riChang', 2)"
                          />
                        </a-tooltip>
                        <a-tooltip
                          content="删除"
                          v-if="formData.data.riChang.length > 1"
                        >
                          <a-popconfirm
                            content="是否确认删除该条数据?"
                            @ok="removeSub(record.id, rowIndex, 'riChang')"
                          >
                            <IconFont
                              type="icon-delete"
                              :size="26"
                              :style="{
                                cursor: 'pointer'
                              }"
                            />
                          </a-popconfirm>
                        </a-tooltip>
                      </div>
                    </template>
                  </a-table-column>
                </template>
              </a-table>
            </a-form-item>
          </section>

          <section v-if="formData.data?.unFinished?.length > 0">
            <div class="title-box">
              <div class="title">
                <div
                  :style="{
                    marginLeft: '20px'
                  }"
                >
                  未完成事项
                </div>
                <div>
                  <a-popconfirm
                    content="是否删除该项？"
                    @ok="del('unFinished')"
                  >
                    <a-tooltip content="删除" position="left">
                      <IconFont
                        class="icon"
                        type="icon-delete"
                        :size="24"
                      ></IconFont>
                    </a-tooltip>
                  </a-popconfirm>
                </div>
              </div>
            </div>
            <a-form-item hide-label no-style>
              <a-table
                :data="formData.data.unFinished"
                :bordered="{ cell: true }"
                :pagination="false"
              >
                <template #columns>
                  <a-table-column title="事项" :width="200" dataIndex="name">
                    <template #title>
                      <span class="star">事项</span>
                    </template>
                    <template #cell="{ record }">
                      <a-form-item hide-label>
                        <a-input v-model="record.name" />
                      </a-form-item>
                    </template>
                  </a-table-column>
                  <a-table-column
                    title="完成情况"
                    :width="200"
                    dataIndex="situation"
                  >
                    <template #cell="{ record }">
                      <a-form-item hide-label>
                        <a-input v-model="record.situation" />
                      </a-form-item>
                    </template>
                  </a-table-column>
                  <a-table-column
                    title="事项情况说明"
                    :width="200"
                    dataIndex="remark"
                  >
                    <template #cell="{ record }">
                      <a-form-item hide-label>
                        <a-input v-model="record.remark" />
                      </a-form-item>
                    </template>
                  </a-table-column>
                  <a-table-column
                    title="完成时间"
                    :width="200"
                    dataIndex="endTime"
                  >
                    <template #cell="{ record }">
                      <a-form-item hide-label>
                        <a-date-picker v-model="record.endTime" />
                      </a-form-item>
                    </template>
                  </a-table-column>
                  <a-table-column
                    title="接收人"
                    :width="200"
                    dataIndex="acceptId"
                  >
                    <template #title>
                      <span class="star">接收人</span>
                    </template>
                    <template #cell="{ record }">
                      <a-form-item hide-label>
                        <a-select
                          placeholder="请选择"
                          v-model="record.acceptId"
                          allow-search
                          allow-clear
                          disabled
                        >
                        </a-select>
                      </a-form-item>
                    </template>
                  </a-table-column>
                  <a-table-column
                    title="监督人"
                    :width="200"
                    dataIndex="superviseId"
                  >
                    <template #title>
                      <span class="star">监督人</span>
                    </template>
                    <template #cell="{ record }">
                      <a-form-item hide-label>
                        <a-select
                          placeholder="请选择"
                          v-model="record.superviseId"
                          allow-search
                          allow-clear
                          disabled
                        >
                        </a-select>
                      </a-form-item>
                    </template>
                  </a-table-column>
                  <a-table-column title="操作" :width="80" fixed="right">
                    <template #cell="{ record, rowIndex }">
                      <div class="operation">
                        <a-tooltip content="新增">
                          <IconFont
                            type="icon-add-def"
                            :size="26"
                            :style="{
                              cursor: 'pointer'
                            }"
                            @click="addSub(rowIndex, 'unFinished', 3)"
                          />
                        </a-tooltip>
                        <a-tooltip
                          content="删除"
                          v-if="formData.data.unFinished.length > 1"
                        >
                          <a-popconfirm
                            content="是否确认删除该条数据?"
                            @ok="removeSub(record.id, rowIndex, 'unFinished')"
                          >
                            <IconFont
                              type="icon-delete"
                              :size="26"
                              :style="{
                                cursor: 'pointer'
                              }"
                            />
                          </a-popconfirm>
                        </a-tooltip>
                      </div>
                    </template>
                  </a-table-column>
                </template>
              </a-table>
            </a-form-item>
          </section>

          <section v-if="formData.data?.daiBan?.length > 0">
            <div class="title-box">
              <div class="title">
                <div
                  :style="{
                    marginLeft: '20px'
                  }"
                >
                  待办事项
                </div>
                <div>
                  <a-popconfirm content="是否删除该项？" @ok="del('daiBan')">
                    <a-tooltip content="删除" position="left">
                      <IconFont
                        class="icon"
                        type="icon-delete"
                        :size="24"
                      ></IconFont>
                    </a-tooltip>
                  </a-popconfirm>
                </div>
              </div>
            </div>
            <a-form-item hide-label no-style>
              <a-table
                :data="formData.data.daiBan"
                :bordered="{ cell: true }"
                :pagination="false"
              >
                <template #columns>
                  <a-table-column title="事项" :width="200" dataIndex="name">
                    <template #title>
                      <span class="star">事项</span>
                    </template>
                    <template #cell="{ record }">
                      <a-form-item hide-label>
                        <a-input v-model="record.name" />
                      </a-form-item>
                    </template>
                  </a-table-column>
                  <a-table-column
                    title="完成情况"
                    :width="200"
                    dataIndex="situation"
                  >
                    <template #cell="{ record }">
                      <a-form-item hide-label>
                        <a-input v-model="record.situation" />
                      </a-form-item>
                    </template>
                  </a-table-column>
                  <a-table-column
                    title="事项情况说明"
                    :width="200"
                    dataIndex="remark"
                  >
                    <template #cell="{ record }">
                      <a-form-item hide-label>
                        <a-input v-model="record.remark" />
                      </a-form-item>
                    </template>
                  </a-table-column>
                  <a-table-column
                    title="完成时间"
                    :width="200"
                    dataIndex="endTime"
                  >
                    <template #cell="{ record }">
                      <a-form-item hide-label>
                        <a-date-picker v-model="record.endTime" />
                      </a-form-item>
                    </template>
                  </a-table-column>
                  <a-table-column
                    title="接收人"
                    :width="200"
                    dataIndex="acceptId"
                  >
                    <template #title>
                      <span class="star">接收人</span>
                    </template>
                    <template #cell="{ record }">
                      <a-form-item hide-label>
                        <a-select
                          placeholder="请选择"
                          v-model="record.acceptId"
                          allow-search
                          allow-clear
                          disabled
                        >
                        </a-select>
                      </a-form-item>
                    </template>
                  </a-table-column>
                  <a-table-column
                    title="监督人"
                    :width="200"
                    dataIndex="superviseId"
                  >
                    <template #title>
                      <span class="star">监督人</span>
                    </template>
                    <template #cell="{ record }">
                      <a-form-item hide-label>
                        <a-select
                          placeholder="请选择"
                          v-model="record.superviseId"
                          allow-search
                          allow-clear
                          disabled
                        >
                        </a-select>
                      </a-form-item>
                    </template>
                  </a-table-column>
                  <a-table-column title="操作" :width="80" fixed="right">
                    <template #cell="{ record, rowIndex }">
                      <div class="operation">
                        <a-tooltip content="新增">
                          <IconFont
                            type="icon-add-def"
                            :size="26"
                            :style="{
                              cursor: 'pointer'
                            }"
                            @click="addSub(rowIndex, 'daiBan', 4)"
                          />
                        </a-tooltip>
                        <a-tooltip
                          content="删除"
                          v-if="formData.data.daiBan.length > 1"
                        >
                          <a-popconfirm
                            content="是否确认删除该条数据?"
                            @ok="removeSub(record.id, rowIndex, 'daiBan')"
                          >
                            <IconFont
                              type="icon-delete"
                              :size="26"
                              :style="{
                                cursor: 'pointer'
                              }"
                            />
                          </a-popconfirm>
                        </a-tooltip>
                      </div>
                    </template>
                  </a-table-column>
                </template>
              </a-table>
            </a-form-item>
          </section>

          <section v-if="formData.data?.ziChan?.length > 0">
            <div class="title-box">
              <div class="title">
                <div
                  :style="{
                    marginLeft: '20px'
                  }"
                >
                  资产移交
                </div>
                <div>
                  <a-popconfirm content="是否删除该项？" @ok="del('ziChan')">
                    <a-tooltip content="删除" position="left">
                      <IconFont
                        class="icon"
                        type="icon-delete"
                        :size="24"
                      ></IconFont>
                    </a-tooltip>
                  </a-popconfirm>
                </div>
              </div>
            </div>
            <a-form-item hide-label no-style>
              <a-table
                :data="formData.data.ziChan"
                :bordered="{ cell: true }"
                :pagination="false"
              >
                <template #columns>
                  <a-table-column
                    title="资产名称"
                    :width="200"
                    dataIndex="name"
                  >
                    <template #title>
                      <span class="star">资产名称</span>
                    </template>
                    <template #cell="{ record }">
                      <a-form-item hide-label>
                        <a-input v-model="record.name" />
                      </a-form-item>
                    </template>
                  </a-table-column>
                  <a-table-column title="数量" :width="200" dataIndex="num">
                    <template #title>
                      <span class="star">数量</span>
                    </template>
                    <template #cell="{ record }">
                      <a-form-item hide-label>
                        <a-input-number
                          hide-button
                          :min="1"
                          v-model="record.num"
                        />
                      </a-form-item>
                    </template>
                  </a-table-column>
                  <a-table-column title="用途" :width="200" dataIndex="remark">
                    <template #title>
                      <span class="star">用途</span>
                    </template>
                    <template #cell="{ record }">
                      <a-form-item hide-label>
                        <a-input v-model="record.remark" />
                      </a-form-item>
                    </template>
                  </a-table-column>
                  <a-table-column
                    title="接收人"
                    :width="200"
                    dataIndex="acceptId"
                  >
                    <template #title>
                      <span class="star">接收人</span>
                    </template>
                    <template #cell="{ record }">
                      <a-form-item hide-label>
                        <a-select
                          placeholder="请选择"
                          v-model="record.acceptId"
                          allow-search
                          allow-clear
                          disabled
                        >
                        </a-select>
                      </a-form-item>
                    </template>
                  </a-table-column>
                  <a-table-column
                    title="监督人"
                    :width="200"
                    dataIndex="superviseId"
                  >
                    <template #title>
                      <span class="star">监督人</span>
                    </template>
                    <template #cell="{ record }">
                      <a-form-item hide-label>
                        <a-select
                          placeholder="请选择"
                          v-model="record.superviseId"
                          allow-search
                          allow-clear
                          disabled
                        >
                        </a-select>
                      </a-form-item>
                    </template>
                  </a-table-column>
                  <a-table-column title="操作" :width="80" fixed="right">
                    <template #cell="{ record, rowIndex }">
                      <div class="operation">
                        <a-tooltip content="新增">
                          <IconFont
                            type="icon-add-def"
                            :size="26"
                            :style="{
                              cursor: 'pointer'
                            }"
                            @click="addSub(rowIndex, 'ziChan', 5)"
                          />
                        </a-tooltip>
                        <a-tooltip
                          content="删除"
                          v-if="formData.data.ziChan.length > 1"
                        >
                          <a-popconfirm
                            content="是否确认删除该条数据?"
                            @ok="removeSub(record.id, rowIndex, 'ziChan')"
                          >
                            <IconFont
                              type="icon-delete"
                              :size="26"
                              :style="{
                                cursor: 'pointer'
                              }"
                            />
                          </a-popconfirm>
                        </a-tooltip>
                      </div>
                    </template>
                  </a-table-column>
                </template>
              </a-table>
            </a-form-item>
          </section>

          <section v-if="formData.data?.ziYuan?.length > 0">
            <div class="title-box">
              <div class="title">
                <div
                  :style="{
                    marginLeft: '20px'
                  }"
                >
                  资源移交
                </div>
                <div>
                  <a-popconfirm content="是否删除该项？" @ok="del('ziYuan')">
                    <a-tooltip content="删除" position="left">
                      <IconFont
                        class="icon"
                        type="icon-delete"
                        :size="24"
                      ></IconFont>
                    </a-tooltip>
                  </a-popconfirm>
                </div>
              </div>
            </div>
            <a-form-item hide-label no-style>
              <a-table
                :data="formData.data.ziYuan"
                :bordered="{ cell: true }"
                :pagination="false"
              >
                <template #columns>
                  <a-table-column
                    title="资源名称"
                    :width="200"
                    dataIndex="name"
                  >
                    <template #title>
                      <span class="star">资源名称</span>
                    </template>
                    <template #cell="{ record }">
                      <a-form-item hide-label>
                        <a-input v-model="record.name" />
                      </a-form-item>
                    </template>
                  </a-table-column>
                  <a-table-column title="资源上传" :width="200" dataIndex="url">
                    <template #title>
                      <span class="star">资源上传</span>
                    </template>
                    <template #cell="{ rowIndex, record }">
                      <a-form-item hide-label>
                        <!-- <a-upload ref="uploadRef" action="/" /> -->
                        <UploadFile
                          class="file"
                          :ref="(e, ind) => setRefs(e, rowIndex)"
                          :fileList="
                            JSON.parse(record?.url !== '' ? record?.url : '[]')
                          "
                          :draggable="false"
                          tip="请上传JPG、JPEG、PNG、DOC、DOCX、PDF、EXCEL、XLSX、XLS格式"
                          :fileTypeList="fileTypeList"
                          :userId="userId"
                          :type="2"
                        />
                      </a-form-item>
                    </template>
                  </a-table-column>
                  <a-table-column
                    title="接收人"
                    :width="200"
                    dataIndex="acceptId"
                  >
                    <template #title>
                      <span class="star">接收人</span>
                    </template>
                    <template #cell="{ record }">
                      <a-form-item hide-label>
                        <a-select
                          placeholder="请选择"
                          v-model="record.acceptId"
                          allow-search
                          allow-clear
                          disabled
                        >
                        </a-select>
                      </a-form-item>
                    </template>
                  </a-table-column>
                  <a-table-column
                    title="监督人"
                    :width="200"
                    dataIndex="superviseId"
                  >
                    <template #title>
                      <span class="star">监督人</span>
                    </template>
                    <template #cell="{ record }">
                      <a-form-item hide-label>
                        <a-select
                          placeholder="请选择"
                          v-model="record.superviseId"
                          allow-search
                          allow-clear
                          disabled
                        >
                        </a-select>
                      </a-form-item>
                    </template>
                  </a-table-column>
                  <a-table-column title="操作" :width="80" fixed="right">
                    <template #cell="{ record, rowIndex }">
                      <div class="operation">
                        <a-tooltip content="新增">
                          <IconFont
                            type="icon-add-def"
                            :size="26"
                            :style="{
                              cursor: 'pointer'
                            }"
                            @click="addSub(rowIndex, 'ziYuan', 6)"
                          />
                        </a-tooltip>
                        <a-tooltip
                          content="删除"
                          v-if="formData.data.ziYuan.length > 1"
                        >
                          <a-popconfirm
                            content="是否确认删除该条数据?"
                            @ok="removeSub(record.id, rowIndex, 'ziYuan')"
                          >
                            <IconFont
                              type="icon-delete"
                              :size="26"
                              :style="{
                                cursor: 'pointer'
                              }"
                            />
                          </a-popconfirm>
                        </a-tooltip>
                      </div>
                    </template>
                  </a-table-column>
                </template>
              </a-table>
            </a-form-item>
          </section>

          <section v-if="formData.data?.other?.length > 0">
            <div class="title-box">
              <div class="title">
                <div
                  :style="{
                    marginLeft: '20px'
                  }"
                >
                  其他交接事项
                </div>
                <div>
                  <a-popconfirm content="是否删除该项？" @ok="del('other')">
                    <a-tooltip content="删除" position="left">
                      <IconFont
                        class="icon"
                        type="icon-delete"
                        :size="24"
                      ></IconFont>
                    </a-tooltip>
                  </a-popconfirm>
                </div>
              </div>
            </div>
            <a-form-item hide-label no-style>
              <a-table
                :data="formData.data.other"
                :bordered="{ cell: true }"
                :pagination="false"
              >
                <template #columns>
                  <a-table-column
                    title="事项名称"
                    :width="200"
                    dataIndex="name"
                  >
                    <template #title>
                      <span class="star">事项名称</span>
                    </template>
                    <template #cell="{ record }">
                      <a-form-item hide-label>
                        <a-input v-model="record.name" />
                      </a-form-item>
                    </template>
                  </a-table-column>
                  <a-table-column
                    title="事项说明"
                    :width="200"
                    dataIndex="remark"
                  >
                    <template #title>
                      <span class="star">事项说明</span>
                    </template>
                    <template #cell="{ record }">
                      <a-form-item hide-label>
                        <a-input v-model="record.remark" />
                      </a-form-item>
                    </template>
                  </a-table-column>
                  <a-table-column
                    title="接收人"
                    :width="200"
                    dataIndex="acceptId"
                  >
                    <template #title>
                      <span class="star">接收人</span>
                    </template>
                    <template #cell="{ record }">
                      <a-form-item hide-label>
                        <a-select
                          placeholder="请选择"
                          v-model="record.acceptId"
                          allow-search
                          allow-clear
                          disabled
                        >
                        </a-select>
                      </a-form-item>
                    </template>
                  </a-table-column>
                  <a-table-column
                    title="监督人"
                    :width="200"
                    dataIndex="superviseId"
                  >
                    <template #title>
                      <span class="star">监督人</span>
                    </template>
                    <template #cell="{ record }">
                      <a-form-item hide-label>
                        <a-select
                          placeholder="请选择"
                          v-model="record.superviseId"
                          allow-search
                          allow-clear
                          disabled
                        >
                        </a-select>
                      </a-form-item>
                    </template>
                  </a-table-column>
                  <a-table-column title="操作" :width="80" fixed="right">
                    <template #cell="{ record, rowIndex }">
                      <div class="operation">
                        <a-tooltip content="新增">
                          <IconFont
                            type="icon-add-def"
                            :size="26"
                            :style="{
                              cursor: 'pointer'
                            }"
                            @click="addSub(rowIndex, 'other', 7)"
                          />
                        </a-tooltip>
                        <a-tooltip
                          content="删除"
                          v-if="formData.data.other.length > 1"
                        >
                          <a-popconfirm
                            content="是否确认删除该条数据?"
                            @ok="removeSub(record.id, rowIndex, 'other')"
                          >
                            <IconFont
                              type="icon-delete"
                              :size="26"
                              :style="{
                                cursor: 'pointer'
                              }"
                            />
                          </a-popconfirm>
                        </a-tooltip>
                      </div>
                    </template>
                  </a-table-column>
                </template>
              </a-table>
            </a-form-item>
          </section>
        </a-form>
      </div>
    </template>
  </TemplateDesign>
</template>

<script lang="ts" setup>
import {
  PostLeaveQuit,
  DelLeaveQuitList,
  PutLeaveQuitList,
  RepeaLeaveQuitList
} from '@/apis/management/human/baseSetting/leaveSetting';
import { cloneDeep } from 'lodash';

const props = withDefaults(
  // 参数说明
  defineProps<{
    visible: boolean;
    data: any; // 传进来的数据
    isCopy: boolean; // 是否是复制操作
  }>(),
  {
    isCopy: false
  }
);

const emits = defineEmits(['update:visible', 'refresh']);
const userId = +localStorage.getItem('userId');
let refForm = ref();

const validateName = async (val: string, cb: any) => {
  try {
    if (formData.data?.baseInfo.id && props.data.baseInfo.name == val) {
      //
    } else {
      const res = await RepeaLeaveQuitList({
        name: val
      });
      if (res.code) cb(`${res.msg}`);
    }
  } catch (error: unknown) {
    console.log(error);
  }
};

const rules = {
  name: [
    {
      required: true,
      message: '请输入模板名称'
    },
    {
      validator: validateName
    }
  ],
  enable: [
    {
      required: true,
      message: '请选择启用状态'
    }
  ]
};

const fileTypeList = [
  '.png',
  '.jpeg',
  '.jpg',
  '.doc',
  '.docx',
  '.pdf',
  '.xls',
  '.xlsx'
];
const formData = reactive({
  data: {
    baseInfo: {
      name: '',
      enable: 1,
      remark: ''
    },
    // 文件移交
    wenJian: [
      {
        name: '',
        remark: '',
        num: 1,
        superviseId: undefined, // 监督人Id
        acceptId: undefined, // 接收人Id
        type: 1,
        ownerId: undefined,
        url: ''
      }
    ],
    // 日常工作移交
    riChang: [
      {
        name: '',
        remark: '',
        num: 1,
        acceptId: undefined, // 接收人Id
        superviseId: undefined,
        type: 2,
        ownerId: undefined,
        url: ''
      }
    ],
    // 未完成待办事项
    unFinished: [
      {
        name: '',
        remark: '',
        num: 1,
        acceptId: undefined, // 接收人Id
        superviseId: undefined,
        type: 3,
        ownerId: undefined,
        url: ''
      }
    ],
    // 待办事项
    daiBan: [
      {
        name: '',
        remark: '',
        num: 1,
        superviseId: undefined,
        type: 4,
        ownerId: undefined,
        url: ''
      }
    ],
    // 资产移交
    ziChan: [
      {
        name: '',
        remark: '',
        num: 1,
        acceptId: undefined, // 接收人Id
        superviseId: undefined,
        type: 5,
        ownerId: undefined,
        url: ''
      }
    ],
    // 资源移交
    ziYuan: [
      {
        name: '',
        remark: '',
        num: 1,
        acceptId: undefined, // 接收人Id
        superviseId: undefined,
        type: 6,
        ownerId: undefined,
        url: ''
      }
    ],
    // 其他交接事项
    other: [
      {
        name: '',
        remark: '',
        num: 1,
        acceptId: undefined, // 接收人Id
        superviseId: undefined,
        type: 7,
        ownerId: undefined,
        url: ''
      }
    ]
  }
});
let orginData = cloneDeep(formData.data);

let templateRef = ref();
watch(
  () => props.visible,
  (newVal: boolean) => {
    if (newVal) {
      console.log('====================================');
      console.log(props.data.baseInfo?.id, props.isCopy);
      console.log('====================================');
      if (props.data.baseInfo?.id || props.isCopy) {
        formData.data = cloneDeep(props.data);
      } else {
        formData.data = cloneDeep(orginData);
      }
      deleteList = {
        type: 2,
        ownerId: undefined,
        types: []
      };
      templateRef.value.fullScreen();
    }
  }
);

const addInfo = {
  name: '',
  remark: '', // 备注/说明
  situation: '',
  endTime: '',
  num: 1,
  acceptId: undefined, // 接收人Id
  superviseId: undefined,
  type: 1,
  ownerId: undefined,
  url: ''
};

let deleteList = reactive({
  type: 2,
  ownerId: undefined,
  types: []
});
// 删除大项
const del = (key: string) => {
  deleteList.types.push(formData.data[key][0].type);
  deleteList.ownerId = formData.data[key][0].ownerId;
  delete formData.data[key];
};

type keyType =
  | 'wenJian'
  | 'riChang'
  | 'unFinished'
  | 'daiBan'
  | 'ziChan'
  | 'ziYuan'
  | 'other';
const addSub = (ind: number, key: keyType, type: 1 | 2 | 3 | 4 | 5 | 6 | 7) => {
  addInfo.type = type;
  addInfo.ownerId = formData.data.baseInfo?.id | undefined;
  formData.data[key].push(cloneDeep(addInfo));
};

let delSubIds = []; // 储存删除的子项id
const removeSub = (id: number, ind: number, key: keyType) => {
  delSubIds.push(id);
  formData.data[key].splice(ind, 1);
};

let uploadRefs = ref({});
const setRefs = (e, ind) => {
  uploadRefs.value[ind] = e;
};
// 保存
const save = async () => {
  try {
    for (let key in uploadRefs.value) {
      await uploadRefs.value[key].submit();
      formData.data.ziYuan[key].url = JSON.stringify(
        uploadRefs.value[key].uploadList.map((ele: any) => {
          return {
            fileName: ele.response.useFileName || ele.response.fileName,
            fileUrl: ele.response.DownloadPath || ele.response.fileUrl,
            id: ele.response.id || ele.response.id
          };
        })
      );
    }
    if (formData.data.baseInfo.id) {
      if (deleteList.types.length > 0) {
        await DelLeaveQuitList(deleteList);
      }
      if (delSubIds.length > 0) {
        await DelLeaveQuitList({
          type: 3,
          ids: delSubIds
        });
      }
      await PutLeaveQuitList(formData.data);
    } else await PostLeaveQuit(formData.data);
    console.log('adsdas', formData.data);
    emits('update:visible', false);
    emits('refresh');
  } catch (error: unknown) {
    console.log(error);
  }
};

const back = () => {
  emits('update:visible', false);
};
</script>

<style scoped lang="less">
.wrap {
  width: 90%;
  margin: 20px auto;

  section {
    margin-bottom: 20px;
    .title-box {
      position: relative;
      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 36px;
        border-radius: 4px;
        font-weight: 700;
        // margin-bottom: 10px;
        background: #edeffd;
      }

      &::before {
        position: absolute;
        // top: 33px;
        left: 10px;
        display: inline-block;
        height: 18px;
        top: 50%;
        transform: translateY(-50%);
        width: 5px;
        margin-right: 20px;
        border-radius: 2px;
        // transform: translateY(-50%);
        content: '';
        background-color: #165dff;
      }
      .icon {
        cursor: pointer;
        margin-right: 20px;
      }
    }
    .operation {
      position: relative;
      bottom: 10px;
    }

    .star::before {
      content: '*';
      color: red;
    }
  }

  footer {
    height: 50px;
    width: calc(100% - 100px);
    background-color: #fff;
    box-shadow: 1px -1px 10px 0 #cacaca;
    position: fixed;
    bottom: 0;
    left: 10%;
    display: flex;
    justify-content: center;
    align-items: center;

    .btn {
      width: 120px;
      height: 40px;
      border-radius: 5px;
    }
  }
}
:deep(.arco-input-wrapper) {
  border-style: none;
}

:deep(.arco-upload-wrapper) {
  text-align: center;
}

:deep(.arco-table-th),
:deep(.arco-table-td) {
  height: 30px;
}

:deep(.arco-table-th) {
  font-weight: 700;
}

:deep(.arco-table-cell) {
  justify-content: center;
  text-align: center;
}
</style>
